<template>
  <div>
    <Row :gutter="10">
      <Col>
      <Card>
        <div class="live_wrapper clearfix"
             style="margin-top: 10px">
          <Input v-model="filter.name"
                 @on-search="search"
                 search
                 enter-button="搜索"
                 placeholder="请输入用户名称"
                 style="float:left; display:inline-table; width: 180px;margin-right: 10px;margin-bottom: 10px;" />
          <Input v-model="filter.order_sn"
                 @on-search="search"
                 search
                 enter-button="搜索"
                 placeholder="请输入订单编号"
                 style="float:left; display:inline-table; width: 180px;margin-right: 10px;margin-bottom: 10px;" />
          <Select v-model="filter.state"
                  style="float:left; width: 130px;margin-right: 10px;margin-bottom: 10px;"
                  @on-change="search"
                  placeholder="订单状态">
            <Option value=-1>全部</Option>
            <Option value=0>待付款</Option>
            <Option value=1>待发货</Option>
            <Option value=2>待收货</Option>
            <Option value=3>售后中</Option>
            <Option value=4>已完成</Option>
            <Option value=5>退款中</Option>
            <Option value=6>退款成功</Option>
            <Option value=7>退款失败</Option>
            <Option value=8>已取消</Option>
          </Select>
          <DatePicker type="daterange"
                      v-model="created_at"
                      @on-change="search"
                      placement="bottom-end"
                      placeholder="选择创建时间"
                      style="float:left; width: 200px; margin-right: 10px;margin-bottom: 10px;"></DatePicker>
          <Button type="primary"
                  @click.stop="exportData()"
                  style="float:left; width: 80px;height: 34px;font-size: 14px;margin-bottom: 10px;">导出</Button>
        </div>
        <p class="admin_title">
          全部订单
        </p>
        <Row class="margin-top-10 table_pattern table_pattern2">
          <Table style="width: calc(100vw - 256px - 36px - 32px)"
                 :loading="loading"
                 :columns="columns"
                 :data="list"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page :total="pagenation.totalPage"
                :page-size="pagenation.perPage"
                :current="pagenation.currentPage"
                show-elevator
                show-total
                @on-change="change"></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <Modal v-model="show_order_info"
           title="订单详情"
           width="800px"
           :mask-closable="false"
           class="goods_modal">
      <div id="orderInfo"
           style="padding-top:20px">
        <Form :label-width="110"
              style='margin-left:10px'>
          <FormItem label="用户姓名">
            <Input v-model="order_info.name"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="用户手机号">
            <Input v-model="order_info.phone"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="邀请人">
            <Input v-model="order_info.invitation_name"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="订单号">
            <Input v-model="order_info.order_sn"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="订单金额">
            <Input v-model="order_info.money"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="订单状态">
            <Input v-model="order_info.state_name"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="下单时间">
            <Input v-model="order_info.created_time"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="收货人姓名">
            <Input v-model="order_info.address_name"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="收货人手机号">
            <Input v-model="order_info.address_phone"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="收货人地址">
            <Input v-model="order_info.address"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="支付时间"
                    v-if="order_info.pay_at">
            <Input v-model="order_info.pay_time"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="发货时间"
                    v-if="order_info.send_at">
            <Input v-model="order_info.send_time"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="快递名称"
                    v-if='0'>
            <Input v-model="order_info.order_send_name"
                   readonly
                   style="width: 575px;" />
            <Icon type="ios-copy-outline"
                  size="28"
                  @click="copyUrl(1)"
                  style="cursor:pointer;margin-left:5px" />
          </FormItem>
          <FormItem label="快递单号"
                    v-if='0'>
            <Input v-model="order_info.order_send_code"
                   readonly
                   style="width: 575px;" />
            <Icon type="ios-copy-outline"
                  size="28"
                  @click="copyUrl(2)"
                  style="cursor:pointer;margin-left:5px" />
          </FormItem>
          <FormItem label="确认收货时间"
                    v-if="order_info.receive_at">
            <Input v-model="order_info.receive_time"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="发起退款时间"
                    v-if="order_info.refund_start_at">
            <Input v-model="order_info.refund_start_time"
                   readonly
                   style="width: 600px;" />
          </FormItem>
          <FormItem label="成功退款时间"
                    v-if="order_info.refund_success_at">
            <Input v-model="order_info.refund_success_time"
                   readonly
                   style="width: 600px;" />
          </FormItem>
        </Form>
        <p class="admin_title"
           style="margin-top:50px">
          订单商品
        </p>
        <Row class="margin-top-10 table_pattern"
             v-if='order_info.good_list && order_info.good_list.length'>
          <Table :columns="columns_good"
                 :data="order_info.good_list"></Table>
        </Row>
      </div>
    </Modal>
    <Modal v-model="show_send_order"
           title="商品发货"
           width="800px"
           :mask-closable="false"
           class="goods_modal cyj_modal">
      <Form :label-width="90">
        <FormItem label="商品信息"
                  class="label_required">
          <div>
            <div class="shop_title">
              <span>名称</span>
              <span>单价</span>
              <span>数量</span>
            </div>
            <CheckboxGroup v-model="goods_select_id_arr">
              <Checkbox :label="item.id+''"
                        v-for="(item,index) in order_good_list"
                        :key="index"
                        :disabled="(item.order_send_code != '' || item.state != 1)"
                        class="shop_desc">
                <p>{{item.good_name}}</p>
                <p>{{item.good_price}}</p>
                <p>{{item.good_num}}</p>
              </Checkbox>
            </CheckboxGroup>
          </div>
        </FormItem>
        <FormItem label="快递名称"
                  prop="order_send_name"
                  class="label_required">
          <Input v-model="order_send_name"
                 placeholder="请输入快递名称" />
        </FormItem>
        <FormItem label="快递单号"
                  prop="order_send_code"
                  class="label_required">
          <Input v-model="order_send_code"
                 placeholder="请输入快递单号" />
        </FormItem>
        <FormItem>
          <Button type="primary"
                  @click="sendOrderSubmit"
                  style="width: 90px;height: 35px;border-radius: 0;font-size: 14px; margin-left:210px">提交</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import Time from '@/tool/Time'
import { orderList, orderInfo, orderSend } from '@/api/main'
export default {
  data () {
    return {
      pagenation: {},
      columns: [
        {
          key: 'order_info',
          title: '订单信息',
          align: 'left',
          width: 500,
          renderHeader: (h, params) => {
            return h('div',
              {
                style: {
                  fontSize: '15px',
                  fontWeight: '700',
                }
              }, '订单信息')
          },
          render: (h, params) => {
            let arr = [
              h(
                'div',
                {
                  style: {
                    float: 'left',
                    width: '100%',
                    paddingTop: '5px',
                    fontSize: '12px',
                  }
                },
                [
                  h('span', {
                  }, '下单时间:' + params.row.created_time),
                  h('span', {
                    style: {
                      marginLeft: '10px'
                    }
                  }, '订单号:' + params.row.order_sn)
                ]
              ),
              h(
                'div',
                {
                  style: {
                    float: 'left',
                    width: '100%',
                    paddingTop: '5px',
                    fontSize: '12px',
                  }
                },
                [
                  h('p', {
                    style: {
                      height: '20px'
                    }
                  }, '共:' + params.row.good_num_total + '件商品，合计:￥' + params.row.money),
                  h('p', {
                    style: {
                      height: '20px'
                    }
                  }, '实付金额:￥' + params.row.money)
                ]
              )
            ]
            params.row.good_data.forEach((item, index) => {
              arr.push(h(
                'div',
                {
                  style: {
                    float: 'left',
                    width: '100%',
                    paddingTop: '5px'
                  }
                },
                [
                  h(
                    'div',
                    {
                      style: {
                        float: 'left',
                        backgroundImage: 'url(' + item.good_img + ')',
                        width: '60px',
                        height: '60px',
                        objectFit: 'cover',
                        margin: '10px auto',
                        position: 'relative',
                        cursor: 'pointer',
                        backgroundSize: 'cover',
                      },
                      on: {
                        click: e => {
                          //this.handleView(params.row.img)
                        },
                      },
                    }
                  ),
                  h(
                    'div',
                    {
                      style: {
                        float: 'left',
                        width: '65%',
                        marginLeft: '10px',
                        paddingTop: '12px'
                      }
                    },
                    [
                      h('p', {
                      }, item.good_name),
                    ]
                  ),
                  h(
                    'div',
                    {
                      style: {
                        float: 'left',
                        width: '10%',
                        marginLeft: '10px',
                        paddingTop: '12px',
                        textAlign: 'right',
                      }
                    },
                    [
                      h('p', {
                      }, item.good_price),
                      h('p', {                        style: {
                          color: '#f00',
                        }
                      }, 'x' + item.good_num),
                    ]
                  ),
                ]
              ))
            })
            return h(
              'div',
              {
                style: {
                  overflow: 'hidden',
                  marginTop: '30px'
                }
              }, arr
            )
          },
        },
        {
          key: 'user_info',
          title: '买家/收货信息',
          align: 'left',
          width: 500,
          renderHeader: (h, params) => {
            return h('div',
              {
                style: {
                  fontSize: '15px',
                  fontWeight: '700',
                }
              }, '买家/收货信息')
          },
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  overflow: 'hidden'
                }
              },
              [
                h(
                  'div',
                  {
                    style: {
                      float: 'left',
                      width: '90%',
                      paddingTop: '15px'
                    }
                  },
                  [
                    h('span', {
                    }, '下单人信息: ' + params.row.name + '  ' + params.row.phone),
                  ]
                ),

                h(
                  'div',
                  {
                    style: {
                      width: '90%',
                      paddingTop: '15px'
                    }
                  },
                  [
                    h('p', {
                    }, '收货人信息: ' + params.row.address_name + '  ' + params.row.address_phone),
                    h('p', {
                    }, params.row.address),
                  ]
                ),
              ]
            )
          },
        },
        {
          key: 'state_name',
          title: '订单状态',
          align: 'center',
          width: 140,
          renderHeader: (h, params) => {
            return h('div',
              {
                style: {
                  fontSize: '15px',
                  fontWeight: '700',
                }
              }, '订单状态')
          },
          render: (h, params) => {
            return h('strong', params.row.state_name)
          },
        },
        {
          key: 'send-type_name',
          title: '配送方式',
          align: 'center',
          width: 150,
          renderHeader: (h, params) => {
            return h('div',
              {
                style: {
                  fontSize: '15px',
                  fontWeight: '700',
                }
              }, '配送方式')
          },
          render: (h, params) => {
            return h('strong', params.row.send_type == 1 ? '快递配送' : '自取')
          },
        },
        {
          title: '操作',
          align: 'center',
          width: 150,
          renderHeader: (h, params) => {
            return h('div',
              {
                style: {
                  fontSize: '15px',
                  fontWeight: '700',
                }
              }, '操作')
          },
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  style: {
                    marginBottom: '5px',
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF'
                  },
                  on: {
                    click: () => {
                      this.orderInfo(params.row.id)
                    },
                  },
                },
                '详情',
              ),
              h(
                'Button',
                {
                  style: {
                    marginBottom: '5px',
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                    display: (params.row.state == 1 && params.row.send_type == 1) ? 'inline-block' : 'none'
                  },
                  on: {
                    click: () => {
                      this.sendOrder(params.row)
                    },
                  },
                },
                '发货',
              ),
              h(
                'Button',
                {
                  style: {
                    marginBottom: '5px',
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                   // display: params.row.state > 2 ? 'inline-block' : 'none'
                    display: 'none'
                  },
                  on: {
                    click: () => {
                      let routeData = this.$router.resolve({ name: 'evaluate-list', params: { order_id: params.row.id } });
                      window.open(routeData.href)
                    },
                  },
                },
                '订单评价',
              ),
            ])
          },
        },
      ],
      columns_good: [
        {
          key: 'good_name',
          title: '商品名称',
          align: 'center',
          width: 150,
          render: (h, params) => {
            let good_name_show = ''
            if (params.row.good_name) {
              good_name_show = params.row.good_name.length > 20 ? (params.row.good_name.slice(0, 16) + '...') : params.row.good_name
            }
            return h('Tooltip', {
              props: {
                content: params.row.good_name,
                placement: "left-start",
                'max-width': '500',
                'transfer': true
              }
            }, good_name_show)
          }
        },
        {
          key: 'price',
          title: '商品单价',
          width: '110',
          render: (h, params) => {
            return h('strong', params.row.price)
          },
        },
        {
          key: 'num',
          title: '数量',
          width: '70',
          render: (h, params) => {
            return h('strong', params.row.num)
          },
        }
      ],
      list: [],
      order_good_list: [],
      loading: true,
      filter: {
        page: 0,
        page_size: 20,
        state: -2,
        name: '',
        order_sn: '',
        created_range: '',
        is_dl: 0,
      },
      imgName: '',
      visible: false,
      created_at: ['', ''],
      order_info: {},
      show_order_info: false,
      show_send_order: false,
      show_order_evaluate: false,
      order_send_name: '',
      order_send_code: '',
      order_id: 0
    }
  },
  watch: {
    'created_at': function () {
      let created_at_start = Time.dateToTimestamp(this.created_at[0])
      let created_at_end = Time.dateToTimestamp(this.created_at[1])
      if (created_at_start !== 0 && created_at_end !== 0) {
        this.filter.created_range = created_at_start + '-' + created_at_end
      } else {
        this.filter.created_range = ''
      }
    }
  },
  methods: {
    change: function (page) {
      this.loading = true
      this.filter.page = page - 1
      this.init()
    },
    search: function () {
      this.filter.page = 0
      this.init()
    },
    orderInfo (id) {
      let _this = this
      let obj = {}
      obj.id = id
      orderInfo(obj).then(res => {
        if (res.code == 0) {
          _this.order_info = res.data
          _this.show_order_info = true
        }
      })
    },
    copyUrl (type) {
      var oInput = document.createElement('input');//创建中转
      let copy_val = ''
      if (type == 1) {
        copy_val = this.order_info.order_send_name
      } else if (type == 2) {
        copy_val = this.order_info.order_send_code
      }
      oInput.value = copy_val
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      let success = document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.style.display = "none";
      if (success) {
        this.$Message.success('复制成功！')
      } else {
        this.$Message.error('复制失败，请手动复制！')
      }
    },
    sendOrder (item) {
      let _this = this
      _this.order_id = item.id
      _this.show_send_order = true
    },
    sendOrderSubmit () {
      let _this = this
      if (_this.order_send_name == '') {
        _this.$Message.error("请输入快递名称"); return;
      }
      if (_this.order_send_code == '') {
        _this.$Message.error("请输入快递单号"); return;
      }
      let obj = {}
      obj.order_id = _this.order_id
      obj.send_name = _this.order_send_name
      obj.send_code = _this.order_send_code
      orderSend(obj).then(res => {
        if (res.code == 0) {
          _this.$Message.success('操作成功')
          _this.order_send_name = ''
          _this.order_send_code = ''
          _this.show_send_order = false
          _this.init()
        } else {
          _this.$Message.error(res.text)
        }
      })
    },
    init () {
      orderList(this.filter).then(res => {
        if (res.code == 0) {
          this.list = res.data
          this.loading = false
          this.pagenation.currentPage = parseInt(res.currentPage) + 1
          this.pagenation.totalPage = parseInt(res.totalPage)
          this.pagenation.perPage = parseInt(res.perPage)
        }
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    exportData () {
      let _this = this
      _this.filter.page = 0
      _this.filter.page_size = 500
      _this.export_list = []
      _this.export()
    },
    export () {
      let _this = this
      orderList(this.filter).then(res => {
        if (res.code == 0) {
          if (res.data.length) {
            _this.export_list.push.apply(_this.export_list, res.data)
            _this.filter.page++
            _this.export()
          } else {
            _this.filter.page_size = 20
            const { export_json_to_excel } = require('../../excel/Export2Excel');
            const tHeader = ['姓名', '手机号', '订单编号', '订单金额', '订单状态', '下单时间', '支付时间', '收货人', '收货人手机号', '收货地址', '商品信息'];
            const filterVal = ['name', 'phone', 'order_sn', 'money', 'state_name', 'created_time', 'pay_time', 'address_name', 'address_phone', 'address', 'goods_info'];
            const data = _this.formatJson(filterVal, _this.export_list)
            export_json_to_excel(tHeader, data, '订单信息')
          }
        }
      })
    },
  },
  mounted () {
    this.init()
  }
}
</script>
<style lang="less">
@page {
	margin-top: 1mm; //去掉页眉
	margin-bottom: 1mm; //去掉页脚
}
.edui-notadd .edui-dialog {
	z-index: 2005 !important;
}
.edui-notadd {
	z-index: 2002 !important;
}
</style>
<style scoped lang="less">
/deep/ .edui-notadd .edui-dialog {
	z-index: 5000 !important;
}
/deep/ input::-webkit-input-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
	font-size: 14px !important;
}
/deep/ input::-moz-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
	font-size: 14px !important;
}
/deep/ input:-moz-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
	font-size: 14px !important;
}
/deep/ input:-ms-input-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
	font-size: 14px !important;
}
</style>
